<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="5">
        <d-card style="min-height: calc(100vh - 145px)">
          <d-row class="d-card-header">
            <d-col [dSpan]="22" style="vertical-align: middle">
              <d-card-header>
                <d-card-title>
                  <d-button-group>
                    <d-button (btnClick)="showRole()" [bsStyle]="roleBtnStyle">{{ 'admin.role' | translate }}</d-button>
                    <d-button (btnClick)="showDept()" [bsStyle]="deptBtnStyle">{{ 'admin.dept' | translate }}</d-button>
                  </d-button-group>
                </d-card-title>
              </d-card-header>
            </d-col>
            <d-col [dSpan]="2" style="text-align: right; vertical-align: middle">
              <d-button
                *ngIf="
                  (authService.hasPrivilege(PRIVILEGE_CODE.roleAdd) && tabId == roleTab) ||
                  (authService.hasPrivilege(PRIVILEGE_CODE.deptAdd) && tabId == deptTab)
                "
                icon="icon-op-add"
                bsStyle="text-dark"
                bsSize="sm"
                title="{{ 'app.common.operate.new.label' | translate }}"
                (btnClick)="openAddDialog()"
              ></d-button>
            </d-col>
          </d-row>
          <d-card-content>
            <ul class="list-group" *ngIf="tabId === roleTab">
              <li
                class="list-group-item"
                *ngFor="let item of roleList"
                (mouseover)="mover(item)"
                (mouseleave)="mleave(item)"
                (dblclick)="searchUserByRole(item)"
                [ngClass]="{ selected: isRoleSelect(item) }"
              >
                <span [ngClass]="{ 'li-disable': item.roleStatus.value != '1' }">{{ item.roleName + '&emsp;' }}</span>
                <span
                  *ngIf="item.showOpIcon && authService.hasPrivilege(PRIVILEGE_CODE.roleEdit)"
                  class="op-icons icon icon-edit"
                  (click)="openEditRoleDialog(item)"
                  title="{{ 'app.common.operate.edit.label' | translate }}"
                ></span>
                <span
                  *ngIf="item.showOpIcon && authService.hasPrivilege(PRIVILEGE_CODE.roleDelete)"
                  class="op-icons icon icon-close"
                  (click)="openDeleteRoleDialog(item)"
                  title="{{ 'app.common.operate.delete.label' | translate }}"
                ></span>
                <span
                  *ngIf="item.showOpIcon && authService.hasPrivilege(PRIVILEGE_CODE.roleGrant)"
                  class="op-icons icon icon-set-role"
                  (click)="openGrantRoleDialog(item)"
                  title="{{ 'app.common.operate.grant.label' | translate }}"
                ></span>
              </li>
            </ul>
            <div *ngIf="tabId === deptTab" style="padding: 10px 0px 10px 0px">
              <d-search
                style="width: 100%; margin-bottom: 8px"
                [placeholder]="searchTip"
                [isKeyupSearch]="true"
                (searchFn)="searchDeptTree($event)"
              ></d-search>
              <d-operable-tree
                #operableTree
                [tree]="deptList"
                [treeNodeIdKey]="'deptId'"
                [treeNodeTitleKey]="'deptName'"
                [treeNodeChildrenKey]="'children'"
                [selectDisabledKey]="'disableSelect'"
                [beforeNodeDrop]="beforeNodeDrop"
                [dropType]="{ dropPrev: true, dropNext: true, dropInner: true }"
                [draggable]="true"
                [checkable]="false"
                (nodeDblClicked)="searchUserByDept($event)"
              >
                <ng-template #operatorTemplate let-optree let-node="node">
                  <span
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.deptAdd)"
                    class="op-icons icon icon-add"
                    (click)="openAddDeptDialog($event, node)"
                  ></span>
                  <span
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.deptEdit)"
                    class="op-icons icon icon-edit"
                    (click)="openEditDeptDialog($event, node)"
                  ></span>
                  <span
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.deptDelete)"
                    class="op-icons icon icon-close"
                    (click)="openDeleteDeptDialog($event, node)"
                  ></span>
                  <span
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.deptGrant)"
                    class="op-icons icon icon-set-role"
                    (click)="openGrantDeptDialog($event, node)"
                  ></span>
                </ng-template>
              </d-operable-tree>
            </div>
          </d-card-content>
        </d-card>
      </d-col>
      <d-col [dSpan]="19">
        <d-row [dGutter]="[0, 12]" [dGutterNoOuter]="true">
          <d-col [dSpan]="24">
            <div class="da-list-container">
              <div class="da-list-header">
                <div class="da-header-left">
                  <d-row [dSpace]="12" [dSpaceDirection]="'horizontal'" [dAlign]="'center'">
                    <d-col>
                      <div class="da-header-item-label">{{ 'admin.userName' | translate }}:</div>
                    </d-col>
                    <d-col>
                      <input dTextInput name="userName" [(ngModel)]="searchFormConfig.userName" (keyup.enter)="refreshUserTable()" />
                    </d-col>
                    <d-col>
                      <div class="da-header-item-label">{{ 'admin.email' | translate }}:</div>
                    </d-col>
                    <d-col>
                      <input dTextInput name="email" [(ngModel)]="searchFormConfig.email" (keyup.enter)="refreshUserTable()" />
                    </d-col>
                    <d-col>
                      <div class="da-header-item-label">{{ 'admin.nickName' | translate }}:</div>
                    </d-col>
                    <d-col>
                      <input dTextInput name="nickName" [(ngModel)]="searchFormConfig.nickName" (keyup.enter)="refreshUserTable()" />
                    </d-col>
                    <d-col>
                      <div class="da-header-item-label">{{ 'admin.userStatus' | translate }}:</div>
                    </d-col>
                    <d-col style="width: 164px">
                      <d-select
                        [options]="userStatusList"
                        name="userStatus"
                        [filterKey]="'label'"
                        [allowClear]="true"
                        [(ngModel)]="searchFormConfig.userStatus"
                        [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                        (valueChange)="refreshUserTable()"
                      >
                        <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
                      </d-select>
                    </d-col>
                  </d-row>
                </div>
                <div class="header-right">
                  <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshUserTable()">{{
                    'app.common.operate.query.label' | translate
                  }}</d-button>
                  <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
                </div>
              </div>
            </div>
          </d-col>
          <d-col [dSpan]="24">
            <div class="da-list-container">
              <div class="da-list-header">
                <div class="header-left"></div>
                <div class="header-right">
                  <d-button-group>
                    <d-button *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.userAdd)" bsStyle="primary" (btnClick)="openAddUserDialog()">{{
                      'app.common.operate.new.label' | translate
                    }}</d-button>
                  </d-button-group>
                </div>
              </div>
              <div class="list-content" id="userContent">
                <d-data-table
                  #userTable
                  [dataSource]="userTableDs"
                  [resizeable]="true"
                  [checkable]="true"
                  [tableLayout]="'fixed'"
                  [scrollable]="true"
                  [fixHeader]="true"
                  (rowCheckChange)="getUserCheckedStatus()"
                  (checkAllChange)="getUserCheckedStatus()"
                >
                  <d-column field="userName" header="{{ 'admin.userName' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="nickName" header="{{ 'admin.nickName' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="email" header="{{ 'admin.email' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="realName" header="{{ 'admin.realName' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="mobilePhone" header="{{ 'admin.mobilePhone' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="gender" header="{{ 'admin.gender' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem.label }}</ng-template>
                    </d-cell>
                  </d-column>
                  <d-column field="userStatus" header="{{ 'admin.userStatus' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem.label }}</ng-template>
                    </d-cell>
                  </d-column>

                  <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}">
                    <d-cell>
                      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                        <div class="btn-group over-flow-ellipsis">
                          <d-button
                            *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.userEdit)"
                            icon="icon-edit"
                            bsStyle="text-dark"
                            (btnClick)="openEditUserDialog(rowItem)"
                            title="{{ 'app.common.operate.edit.label' | translate }}"
                          ></d-button>
                          <d-button
                            *ngIf="rowItem.userStatus.value.substr(0, 1) != '9' && authService.hasPrivilege(PRIVILEGE_CODE.userDelete)"
                            icon="icon-forbid"
                            bsStyle="text-dark"
                            (btnClick)="openDeleteUserDialog(rowItem)"
                            title="{{ 'app.common.operate.forbid.label' | translate }}"
                          ></d-button>
                          <d-button
                            *ngIf="rowItem.userStatus.value.substr(0, 1) == '9' && authService.hasPrivilege(PRIVILEGE_CODE.userDelete)"
                            icon="icon-rollback"
                            bsStyle="text-dark"
                            (btnClick)="enableUser(rowItem)"
                            title="{{ 'app.common.operate.enable.label' | translate }}"
                          ></d-button>
                        </div>
                      </ng-template>
                    </d-cell>
                  </d-column>
                  <ng-template #noResultTemplateRef>
                    <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
                  </ng-template>
                </d-data-table>
              </div>
              <div class="da-list-footer">
                <d-pagination
                  size=""
                  [total]="userPager.total"
                  [(pageSize)]="userPager.pageSize"
                  [(pageIndex)]="userPager.pageIndex"
                  [canViewTotal]="true"
                  [canChangePageSize]="true"
                  [canJumpPage]="true"
                  [maxItems]="5"
                  (pageIndexChange)="refreshUserTable()"
                  (pageSizeChange)="refreshUserTable()"
                >
                </d-pagination>
              </div>
            </div>
          </d-col>
        </d-row>
      </d-col>
    </d-row>
  </div>
</div>
